<template>
  <div id="product-specifications-box">
    <div class="content">
      <div class="row" v-for="(item,index) in currList">
        <div class="left">
          <span class="name">名称: </span> <el-input style="width: 120px;" type="text" v-model="item.name"/>
        </div>
        <div class="right">
          <span class="name">值: </span> <el-input style="width: 120px;" type="text" v-model="item.arr" @change="checkItemValue(index)"/>
        </div>
        <div class="act">
          <button @click="remove(index)" type="button">删除</button>
        </div>
        <div class="c"></div>
      </div>
      <div class="row" style="width: 490px; text-align: center">
        <div class="item">
          <button @click="addEmpty" type="button">新增</button>
        </div>
        <div class="item" v-if="currList.length>0">
          默认值:
          <el-input type="text" v-model="defaultModel"/>
        </div>
        <div class="c"></div>
      </div>
      <div class="c"></div>
    </div>


    <div class="tip-box">
      <div>
        如: 尺寸: 大,中,小
      </div>
      <div>
        【名称】->尺寸，【值】 -> 大,中,小
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductModelBox',
  props: {
    initCurrList: Array,
    callBack: Function
  },
  data: function () {
    return {
      defaultModel:'',
      defaultModelNums:100,
      currList: []
    }
  },
  mounted () {
    if (this.$props.initCurrList) {
      this.setList(this.$props.initCurrList)
      this.addEmpty()
    }
  },
  methods: {
    checkItemValue:function (index) {
      console.log('this.currList[index].value',this.currList[index].arr)
      this.currList[index].arr=this.currList[index].arr.replace('，',',')
    },
    // 设置列表
    setList:function (initListParams,defaultModel) {
      var initList = []
      initListParams.forEach(function (item, index) {
        initList.push({
          name: item.name,
          arr: item.arr.join(','),
        })
      })
      this.currList = initList
      this.defaultModel = defaultModel?defaultModel:''
      // this.currList = initList
      this.$forceUpdate()
    },
    // 移除单行
    remove: function (index) {
      if (this.currList.length > 0) {
        this.currList.splice(index, 1)
      }else{
        this.defaultModel=''
      }
    },
    // 增加空行
    addEmpty: function () {
      var lastOne = this.currList[this.currList.length - 1]
      if (this.currList.length >= 10) {
        return this.$message.error('最大添加10行')
      }
      this.currList = this.currList.concat({
        name: '', arr: ''
      })
    },
    // 确认提交
    getCurrList: function () {
      var arr = []
      this.currList.forEach(function (item, index) {
        if (item.name && item.arr) {
          arr.push({
            name: item.name,
            arr: item.arr.split(','),
          })
        }
      })
      return arr
    }
  }
}
</script>

<style scoped>

</style>
